<template>
  <div class="app-cont">
    <!--这是 Header 区域 -->
    <!--<div class="header">-->
      <!--<headers title="交易记录"></headers>-->
    <!--</div>-->
    <div class="main">
      <div class="main-container">
        <div class="fenlei">
          <div class="month" v-for="(val,key) in monthAry">
            <p>{{key}}月</p>
            <div class="every" v-for="item in val">
              <div class="left">
                <p class="name">{{types[item.type]}}</p>
                <p class="time">{{formatDate(new Date(item.createTime))}}</p>
              </div>
              <div class="right">
                <b>{{item.i}}</b> <span>￥</span>{{item.paymentCount}}
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 底部的 Tabbar 区域 -->

    </div>
  </div>
</template>

<script>
  import wx from 'weixin-js-sdk'
  import { wxHttpTool,wx_config, http_getParam, get_shopQrcoe,wx_share,wx_hideAllMenu } from '../components/httpUtil/httpUtil'
  import {msg_10046} from '../message/msg_10046'
  export default {
    name: 'TransactionRecord',
    data () {
      return {
        types:{0:'个人订单付款' ,1:'团单订单付款' ,2:'个人订单退款', 3:'团单订单退款' ,4:'分销商预付款', 5:'分销商预付款退款', 6:'会员费付款' },
        monthAry:{},
      }
    },
    created() {
      this.fn10026();
    },
    methods: {
      fn10026(){
        const jsonValue = JSON.stringify({
          "c":"10026",
          "p":{
            "userId":JSON.parse(window.localStorage.data).id, //用户ID
            "tokenId":token(),
            "startIndex":0,
            "pageSize":10
          }
        });
        this.$http.post('/api/EarnAlot/qqs.us', jsonValue,false).then((res) => {
          //console.log(res.data.p.csList)
          let csList = res.data.p.csList
          //console.log(csList)
          let obj = {}
          for(let i=0; i< csList.length; i++ ){
            let cur = csList[i];
            let month =  new Date(cur.createTime).getMonth()+1
            if(obj[month]){
              obj[month].push(cur)
            }else {
              obj[month]=[];
              obj[month].push(cur)
            }
          }
          this.monthAry = obj
      })
      },
      // 转化时间格式
      formatDate(now) {
        let year=now.getFullYear();
        let month=now.getMonth()+1;
        let date=now.getDate();
        let hour=now.getHours();
        let minute=now.getMinutes();
        let second=now.getSeconds();
        return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;
      }
    }
  }
</script>
<style lang="scss" scoped>
  .app-cont {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    /*padding: 80px 0 0;*/
    box-sizing: border-box;
    .header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 80px;
    }
    .main {
      flex: 1;
      position: relative;
      .main-container {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
      }
    }
  }



  .fenlei {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    background-color: #f4f4f4;
    display: flex;
    flex-direction: column;
    ::-webkit-scrollbar {
      display: none;
    }

  }

</style>
<style lang="scss">
  a:hover, a:visited, a:link, a:active {
    text-decoration: none;
    outline: none;
  }
.month{
  >p{
    height: 82px;
    box-sizing: border-box;
    padding-left: 30px;
    padding-top: 36px;
    font-size: 24px;
    color: #3b3b43;
    font-weight: 600;
  }
  .every{
    background-color: #fff;
    height: 123px;
    margin-bottom: 2px;
    box-sizing: border-box;
    padding: 30px 30px 0 32px;
    .left{
      .name{
        font-size: 28px;
        color: #3b3b43;
        font-weight: bold;
      }
      .time{
        font-size: 22px;
        color: #818790;
        margin-top: 6px;
      }
    }
    .right{
      font-size: 42px;
      font-family: '中黑体';
      color: #fe3519;
      >span{
        font-size: 34px;
        color: #fe3519;
      }
      >b{
        font-family: '中黑体';
        font-size: 48px;
        color: #fe3519;
        font-weight: bold;
      }
    }
  }
}

</style>
